<p>This rule is deprecated, and will eventually be removed.</p>
<p>Vue.js framework prevents XSS vulnerabilities by automatically escaping HTML contents with the use of native API browsers like
<code>innerText</code> instead of <code>innerHtml</code>.</p>
<p>It’s still possible to explicitly use <code>innerHtml</code> and similar APIs to render HTML. Accidentally rendering malicious HTML data will
introduce an XSS vulnerability in the application and enable a wide range of serious attacks like accessing/modifying sensitive information or
impersonating other users.</p>
<h2>Ask Yourself Whether</h2>
<p>The application needs to render HTML content which:</p>
<ul>
  <li> could be user-controlled and not previously sanitized. </li>
  <li> is difficult to understand how it was constructed. </li>
</ul>
<p>There is a risk if you answered yes to any of those questions.</p>
<h2>Recommended Secure Coding Practices</h2>
<ul>
  <li> Avoid injecting HTML content with <code>v-html</code> directive unless the content can be considered 100% safe, instead try to rely as much as
  possible on built-in auto-escaping Vue.js features. </li>
  <li> Take care when using the <code>v-bind:href</code> directive to set URLs which can contain malicious Javascript
  (<code>javascript:onClick(...)</code>). </li>
  <li> Event directives like <code>:onmouseover</code> are also prone to Javascript injection and should not be used with unsafe values. </li>
</ul>
<h2>Sensitive Code Example</h2>
<p>When using Vue.js templates, the <code>v-html</code> directive enables HTML rendering without any sanitization:</p>
<pre>
&lt;div v-html="htmlContent"&gt;&lt;/div&gt; &lt;!-- Noncompliant --&gt;
</pre>
<p>When using a rendering function, the <code>innerHTML</code> attribute enables HTML rendering without any sanitization:</p>
<pre>
Vue.component('element', {
  render: function (createElement) {
    return createElement(
      'div',
      {
        domProps: {
          innerHTML: this.htmlContent, // Noncompliant
        }
      }
    );
  },
});
</pre>
<p>When using JSX, the <code>domPropsInnerHTML</code> attribute enables HTML rendering without any sanitization:</p>
<pre>
&lt;div domPropsInnerHTML={this.htmlContent}&gt;&lt;/div&gt; &lt;!-- Noncompliant --&gt;
</pre>
<h2>Compliant Solution</h2>
<p>When using Vue.js templates, putting the content as a child node of the element is safe:</p>
<pre>
&lt;div&gt;{{ htmlContent }}&lt;/div&gt;
</pre>
<p>When using a rendering function, using the <code>innerText</code> attribute or putting the content as a child node of the element is safe:</p>
<pre>
Vue.component('element', {
  render: function (createElement) {
    return createElement(
      'div',
      {
        domProps: {
          innerText: this.htmlContent,
        }
      },
      this.htmlContent // Child node
    );
  },
});
</pre>
<p>When using JSX, putting the content as a child node of the element is safe:</p>
<pre>
&lt;div&gt;{this.htmlContent}&lt;/div&gt;
</pre>
<h2>See</h2>
<ul>
  <li> OWASP - <a href="https://owasp.org/Top10/A03_2021-Injection/">Top 10 2021 Category A3 - Injection</a> </li>
  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A7_2017-Cross-Site_Scripting_(XSS)">Top 10 2017 Category A7 - Cross-Site Scripting
  (XSS)</a> </li>
  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/79">CWE-79 - Improper Neutralization of Input During Web Page Generation ('Cross-site
  Scripting')</a> </li>
  <li> <a href="https://vuejs.org/v2/guide/security.html#Injecting-HTML">Vue.js - Security - Injecting HTML</a> </li>
</ul>
